package com.gitee.wsl.common.svg

import com.gitee.wsl.common.svg.container.Container
import com.gitee.wsl.common.svg.gradient.SpreadMode
import com.gitee.wsl.common.ui.base.UT
import org.junit.Test

class SvgDSLTest {
    @Test
    fun `create diagonal circles`() {
        val svg = com.gitee.wsl.common.svg.SVG.svg(true) {
            height = 100.UT
            width = 100.UT
            defs {
                group {
                    id = "circle1"
                    circle {
                        r = 20f
                        fill = "blue"
                        strokeWidth = 2f.UT
                        strokeColor = "red"
                    }
                }
            }
            for (i in 20..80 step 20)
                use {
                    x = i.toFloat()
                    y = i.toFloat()
                    href = "#circle1"
                }
        }

        /*OutputStreamWriter(ByteArrayOutputStream()).use {
            svg.render(it, RenderMode.FILE)
        }*/

        println(svg.render())
    }

    @Test
    fun `create Code Monkey logo`() {
        val svg = com.gitee.wsl.common.svg.SVG.svg(true) {
            height = 300f.UT
            width = 300f.UT
            style {
                body = """

                    svg .black-stroke { stroke: black; stroke-width: 2; }
                    svg .fur-color { fill: white; }

                """.trimIndent()
            }
            // Label
            text {
                x = 40f
                y = 50f
                body = "#CODE"
                fontFamily = "monospace"
                fontSize = "40px"
            }
            // Ears - use a function because USE tag doesn't work in Safari
            ear(100f, 100f)
            ear(240f, 70f)
            // Face
            circle {
                cssClass = "black-stroke"
                id = "face"
                cx = 180f
                cy = 140f
                r = 80f
                fill = "#aa450f"
            }
            // Eyes - use a function because USE tag doesn't work in Safari
            eye(160f, 95f)
            eye(205f, 90f)
            // Muzzle
            circle {
                cssClass = "black-stroke fur-color"
                cx = 195f
                cy = 178f
                r = 40f
            }
            // Nostrils - use a function because USE tag doesn't work in Safari
            nostril(178f, 138f)
            nostril(213f, 133f)
            // Mouth
            pathDef {
                cssClass = "black-stroke"
                d = "M 150 150 C 100,270 310,255 232,140 C 205,190 165,170 150,150 Z"
                fill = "red"
            }
        }

        /*OutputStreamWriter(ByteArrayOutputStream()).use {
            svg.render(it, RenderMode.FILE)
        }*/

        println(svg.render())
    }

    @Test
    fun `create more`() {
        val svg = com.gitee.wsl.common.svg.SVG.svg(true) {
            height = 100.UT
            width = 100.UT
            defs {
                group {
                    id = "circle1"
                    circle {
                        r = 20f
                        fill = "blue"
                        strokeWidth = 2.UT
                        strokeColor = "red"
                    }
                }
            }
            for (i in 20..80 step 20)
                use {
                    x = i.toFloat()
                    y = i.toFloat()
                    href = "#circle1"
                }

            path{
                moveTo(12f,30f)
                lineTo(10f,20f)
                closePath()
            }

            group {
                linearGradient {
                    spreadMode= SpreadMode.SPREAD_REPEAT
                    stopColor {
                        offset = 1.5f
                        color = "rgb(30,200,10)"
                    }
                }
            }
        }

        /*OutputStreamWriter(ByteArrayOutputStream()).use {
            svg.render(it, RenderMode.FILE)
        }*/

        println(svg.render())
    }


    private fun Container.ear(x: Float, y: Float) {
        circle {
            cssClass = "black-stroke fur-color"
            cx = x
            cy = y
            r = 40f
        }
        circle {
            cssClass = "black-stroke fur-color"
            cx = x
            cy = y
            r = 28f
        }
    }

    private fun Container.eye(x: Float, y: Float) {
        circle {
            cssClass = "black-stroke fur-color"
            cx = x
            cy = y
            r = 20f
        }
    }

    private fun Container.nostril(x: Float, y: Float) {
        circle {
            cx = x
            cy = y
            r = 4f
            fill = "black"
        }
    }
}